<template>
  <basic-container>
    <basic-header title="用户统计"/>
    <filter-table 
      :option="filterOption"
      @handle-filter="handleFilter"
    />
    <avue-data-tabs :option="dataOption"></avue-data-tabs>
  </basic-container>
</template>
<script>
import FilterTable from '@/components/FilterTable'
import actionTypes from '@/const/action'
import filterOption from '@/const/filters'
import { SyncGetStatisticsData } from '@/api/data'

const action = actionTypes.STATISTICS_USER
const option = filterOption[action]

export default {
  name: 'category',
  components: { FilterTable },
  data() {
    return {
      filterOption: option,
      filterData: {},
      displayData: {}
    }
  },
  created() {
    this.getStatisticsData()
  },
  computed: {
    dataOption() {
      return { 
        span: 6,
        data: [
          {
            title: '新增用户',
            text: '当前新增用户数',
            count: this.displayData.newUserCount || 0,
            color: 'rgb(27, 201, 142)',
            key: 'N'
          },
          {
            title: '累计用户',
            text: '当前累计用户数',
            count: this.displayData.userCount || 0,
            color: 'rgb(178, 159, 255)',
            key: 'A'
          },
          {
            title: '转发数',
            text: '当前转发小程序用户数',
            count: this.displayData.transmitCount || 0,
            color: 'rgb(245, 192, 42)', 
            key: 'P'
          },
          {
            title: '访问数',
            text: '当前点击小程序用户数',
            count: this.displayData.clickCount || 0,
            color: 'rgb(230, 71, 88)', 
            key: 'K'
          }
        ]
      }
    }
  },
  methods: {
    handleFilter(data) {
      this.filterData = data
      this.getStatisticsData()
    },
    async getStatisticsData() {
      const { data, error } = await SyncGetStatisticsData(action, this.filterData)

      if (error) {
        this.$message({
          type: 'error',
          message: error.message || String(error)
        })
        return
      }

      this.displayData = data.bussData
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

